<template>

  <div >
    <!-- <div class="desc-box"> -->
      <!-- <div style="text-align: center; width: 500px; border: green solid 1px;">
        <img alt="" src="./../../assets/logo.png" style="margin: 0 auto;" />
      </div> -->

<div class="box">
	<img src="./../../assets/logo.png" style="width:80%; height:40%">
</div>    
      <span class="mc-ui-geometry-char" style="height: 20px; width: 200px; position: absolute; left: 30%; top: 20%; color: rgb(193, 23, 23);font-size: 120%;">{{ msg }} </span>
      <span class="mc-ui-geometry-char" style="height: 20px; width: 200px; position: absolute; left: 12%; top: 30%; color: rgb(193, 23, 23);font-size: 120%;">名称录入 : </span>
      <input style="position: absolute; left: 52%; top: 30%;height: 20px; width: 120px;" type="text" placeholder="产品名称" ref="inputName"  @click.stop v-on:keyup="inputName"/>

      <span class="mc-ui-geometry-char" style="height: 20px; width: 200px; position: absolute; left: 12%; top: 35%; color: rgb(193, 23, 23);font-size: 120%;">种类录入 : </span>
      <input style="position: absolute; left: 52%; top: 35.5%;height: 20px; width: 120px;" type="text" placeholder="产品种类" ref="inputProject"  @click.stop v-on:keyup="inputProject"/>

      <span class="mc-ui-geometry-char" style="height: 20px; width: 200px; position: absolute; left: 12%; top: 40%; color: rgb(193, 23, 23);font-size: 120%;">人员录入 : </span>
      <input style="position: absolute; left: 52%; top: 40.5%;height: 20px; width: 120px;" type="text" placeholder="录入人员" ref="inputCreator"  @click.stop v-on:keyup="inputCreator"/>

      <span class="mc-ui-geometry-char" style="height: 20px; width: 200px; position: absolute; left: 12%; top: 45%; color: rgb(193, 23, 23);font-size: 120%;">产地录入 : </span>
      <input style="position: absolute; left: 52%; top: 45.5%;height: 20px; width: 120px;" type="text" placeholder="录入产地" ref="inputLocation"  @click.stop v-on:keyup="inputLocation"/>
    <div class="cinner">
        <input type="button" style="position: absolute; left: 60%; top: 55%;height: 29px; width: 80px;"  value="确认" v-on:click="clickOn"/>
    </div>
        <div id="magicalDragScene">
	<i class="el-icon-user-solid" style="position: absolute;  color: black; left: 40%; top: 88%;font-size: 70%;">@蓝信科技提供数据录入</i>
</div>
  </div>
</template>

<script>
import axios from 'axios'
const host = '10.78.34.207:8082'
// const host = '192.168.2.106:8080'

var newID 
export default {
  name: 'create',
  data () {
    return {
      msg: '信息录入',
      id : null,
      name: null,
      location: null,
      creator: null,
      newid: null,
      time: null,
      project:null,
      inputVal: null,
      iName:'',
      iProject:'',
      iLocation:'',
      iCreator:'',
    }
  },
    methods: {
     getData() {
      const url = `http://${host}/v1/trace/get?uid=${newID}`;
      console.log('[Airport getData] url', url);
      axios.get(url).then((res)=>{
              this.id = res.data.data.ID
              this.name = res.data.data.Name
              this.location = res.data.data.Location
              this.creator = res.data.data.Creator
              this.time = res.data.data.Time
              this.project = res.data.data.Project
              console.log(3333333,res)
      });
    },
    updateData(name,project,location,creator){
      const url = `http://${host}/v1/trace/add`;

      console.log('creator',creator)
      console.log('location',location)
      axios.post(url,{
        name: name,
        project: project,
        creator: creator,
        location: location,
      }).then((res)=>{
        newID = res.data.data
        console.log('newid',res.data.data)
       this.$router.push({ path: '/qcode',query: {uid: res.data.data}});
      })
    },
    clickOn: function () {
      console.log('iName',this.iName)
      console.log('iProject',this.iProject)
      console.log('iLocation',this.iLocation)
      console.log('iCreator',this.iCreator)
      this.updateData(this.iName, this.iProject,this.iLocation,this.iCreator)
    
    },
    inputName: function(){
      console.log('iName',this.iName)
      this.iName = this.$refs.inputName.value
    },
    inputProject: function(){
      console.log('iProject',this.iProject)
      this.iProject = this.$refs.inputProject.value
    },
    inputLocation: function(){
      console.log('iLocation',this.iLocation)
      this.iLocation = this.$refs.inputLocation.value
    },
    inputCreator: function(){
      console.log('iCreator',this.iCreator)
      this.iCreator = this.$refs.inputCreator.value
       
    },            
  },
  mounted(){
    // let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    //         let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    //         let l = w / 2 - this.$refs.wh.offsetWidth / 2;
    //         let t = h / 2 - this.$refs.wh.offsetHeight / 2;
    //         this.$refs.wh.style.left = l + "px"
    //         this.$refs.wh.style.top = t + "px"
  }
}
</script>

<style>
.desc-box {
  padding: 20px 20px 5px;
  background: rgb(73, 8, 8);
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
 #div1{
      display: flex;
      flex-direction:row ;
      align-items: center;/*如果flex-direction：row；代表垂直居中 ；如果flex-direction：column；则代表水平居中*/
      justify-content: center;/*如果flex-direction：row；代表水平居中；如果flex-direction：column；则代表垂直居中*/
      background-color: coral;
      width: 500px;
      height: 500px;   
    }
  .cinner{
          position: absolute;
          /* background-color: darkcyan; */
          /* width: 300px;
          height: 200px; */
          top: 50%;
          left: 50%;
          margin-top: -100px;
          margin-left: -150px;
  }
  .box{
	position: relative;
	width: 50%;
	height: 160px;
}
  .box img {
	position:absolute;
	top: 50%;
	transform: translate(50%, -50%);
}
.png{
   position: absolute;
   top: 50%;
}
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

